<template>
	<view class="background">
		
		  <view>
		    <view class="horizontal-navbar">
		      <view class="nav-item" v-for="(item, index) in navItems" :key="index" @click="navigateTo(item.pagePath)">
		        <text>{{item.text}}</text>
		      </view>
		    </view>
			
			<view class="search-container">
			    <input type="text" class="search-input" placeholder="请输入搜索内容" />
			    <button class="search-button">搜索</button>
			</view>
		    <!-- 页面内容区域 -->
		    <view class="card_container" v-for="(item,index) in student">
				
		    	<uni-card class="registationed_card">
		    	    <image src="../../static/registrationed.png" style="width: 16px; height: 16px;"
		        	class="registationed_img"></image>   
		        	<view class="registationed_name">{{item.name}}</view>
	    			<view class="registationed_num">{{item.num}}</view>
		    	    <view>学院:{{item.aca}}</view>
			    	<view class="dashed-text">专业:{{item.major}}</view>
		        	<view class="status" style="color:#006DFF">恢复上报</view>
		    	</uni-card>
									
		    </view>
		</view>
		
	</view>
</template>

<script setup>

	import { ref , onMounted} from 'vue';
	
	const navItems = ref([
	  { text: '已登记', pagePath: 'EFR_1' },
	  { text: '管理范围', pagePath: 'EFR_2' },
	  // 添加更多导航项
	]);
	
	const navigateTo = (pagePath) => {
	  uni.navigateTo({
	    url: pagePath
	  });
	};
	
	const student = ref([{
		name: "王曦",
		num:2113042416,
		aca:"数学学院",
		major:"分析数学",
		},
    {
        name: "李悦",
        num: 2113042417,
        aca: "物理学院",
        major: "理论物理"
    },
    {
        name: "张涵",
        num: 2113042418,
        aca: "化学学院",
        major: "有机化学"
    },
    {
        name: "刘阳",
        num: 2113042419,
        aca: "生物学院",
        major: "细胞生物学"
    },
    {
        name: "陈晨",
        num: 2113042420,
        aca: "计算机学院",
        major: "人工智能"
    },
    {
        name: "赵琪",
        num: 2113042421,
        aca: "经济学院",
        major: "宏观经济学"
    },
    {
        name: "孙浩",
        num: 2113042422,
        aca: "管理学院",
        major: "企业管理"
    },
    {
        name: "周琳",
        num: 2113042423,
        aca: "法学院",
        major: "民商法学"
    },
    {
        name: "吴迪",
        num: 2113042424,
        aca: "文学院",
        major: "中国古代文学"
    },
    {
        name: "郑强",
        num: 2113042425,
        aca: "外国语学院",
        major: "英语语言文学"
    },
    {
        name: "朱婷",
        num: 2113042426,
        aca: "艺术学院",
        major: "绘画"
    },
    {
        name: "马东",
        num: 2113042427,
        aca: "历史学院",
        major: "世界史"
    },
    {
        name: "杨雪",
        num: 2113042428,
        aca: "教育学院",
        major: "课程与教学论"
    },
    {
        name: "黄鹏",
        num: 2113042429,
        aca: "新闻学院",
        major: "新闻学"
    },
    {
        name: "徐峰",
        num: 2113042430,
        aca: "医学院",
        major: "临床医学"
	}],
	
	)
	
</script>

<style>
	     
	.background{
		width: 100vw;
		height: 100vh;
		background: #F3F5F9;
	}     
	
	.horizontal-navbar {
		display: flex;
		background-color: #f5f5f5;
		padding: 10px;
		  
	    justify-content: space-between; /* 均匀分布导航项 */
	    padding: 10px;
	}
	
	.nav-item {
	    flex: 1; /* 让每个导航项占据相等的空间 */
	    text-align: center; /* 文本居中 */
	    margin-right: 20px;
	} 
	
	.search-container {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
		margin-top: 12px;
	}
	
	.search-input {
	    flex: 1;
	    border: 1px solid #ccc;
	    height: 40px;
	    border-radius: 5px;
	    padding-left: 10px;
	}
	
	.search-button {
	    height: 40px;
	    background-color: #007AFF;
	    color: white;
	    border-radius: 5px;
	    margin-left: 10px;
	    padding: 0 20px;
	}
	
	.registationed_img{
		display: flex;
		margin-top: 19px;
		margin-left: 5px;
	}
	
	.registationed_card{
		display: flex;
	}
	
	.dashed-text {
	  border-bottom: 1px dashed #ccc;
	}
	
	.registationed_name{
		display: flex;
		margin-top: 19px;
		text-indent: 10px;
	}
	
	.registationed_num{
		display: flex;
		text-indent: 180px;
	}
	
	.registationed_img,.registationed_name,.registationed_num{
		display: inline-block;
	}
	
	.uni-card>view{
		padding: 10px;
	}
	
	.uni-card{
		padding: auto;
		margin-top:12px;
	}
</style>
